// 媒体列表项模块
<template>
  <div class="post-item">
    <nuxt-link :to="'/use'+post.userId">
      <img 
        :src="post.img"
        height="44"
        class="user-portray">
    </nuxt-link>
    <small :class="{active:post.tags.isActive}">{{ tag }}</small>
    <span>&nbsp;{{ post.msg }}</span>
    <div class="post-count">
      {{ post.votes }} &nbsp;/ &nbsp;{{ post.replys }} &nbsp;/ &nbsp;{{ post.views }} &nbsp;| <span>&nbsp;{{ post.date }}</span></div>
  </div>
</template>

<script>
import tags from '~/assets/js/tags.js'
export default {
  props: {
    post: {
      type: Object,
      default: () => {}
    }
  },
  computed:{
    tag:function(){
      let data
        data=tags[this.post.tags.tag]
      return data
    }
  }
};
</script>

<style>
.post-item {
  display: flex;
  height: 58px;
  align-items: center;
  padding: 0 15px;
  cursor: pointer;
  border-bottom:1px solid #ddd;
}
.post-item:hover{
  background-color: rgba(100,100,100,0.05);
}
.user-portray {
  padding: 4px;
  border-radius: 50%;
  border: 1px solid #ddd;
  margin-right: 10px;
  display: block;
}
.post-item small {
  padding: 3px 10px;
  background-color: #e5e5e5;
  color: #999;
  border-radius: 3px;
  font-size: 12px;
}
.post-item small.active {
  color: #fff;
  background-color: #409eff;
}
.post-count {
  color: #999;
  font-size: 13px;
  flex: 1;
  text-align: right;
}

</style>